// 源码（版权所有）：
<template>
  <div class="personalCenter">
    <el-container>
      <el-header>详细信息</el-header>
      <el-container>
        <el-aside width="340px">
            <div class="demo-basic--circle">
              <el-avatar
                  :size="90"
                  :src="circleUrl"
                ></el-avatar>
            </div>
            <div class="block" style="margin-left:0px">
                <span>{{username}}</span>
            </div>
          <el-card class="box-card1"  shadow="always" style="margin-left:20px;margin-top:8px;margin-bottom:16px">  
          <el-form style="margin-top:10px">
            <el-form-item label="用户角色" label-width="75px">
              <el-col :span="22">
              <el-input
                v-model="status"
                disabled>
              </el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="性别" label-width="75px"> 
              <el-col :span="22">
              <el-input
                v-model="sex"
                disabled>
              </el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="邮箱" label-width="75px">
              <el-col :span="22">
              <el-input
                v-model="mail"
                type="text"
                disabled
              ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="手机号" label-width="75px">
              <el-col :span="22">
              <el-input
                v-model="phonenumber"
                type="text"
                disabled
              ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="年龄" label-width="75px">
              <el-col :span="22">
              <el-input
                v-model="age"
                type="text"
                disabled
              ></el-input>
              </el-col>
            </el-form-item>
            <!-- <el-form-item label="政治面貌" label-width="80px">
              <el-col :span="20">
              <el-input
                v-model="politics"
                type="text"
                disabled>
              </el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="职业" label-width="80px">
              <el-col :span="20">
              <el-input
                v-model="occupation"
                type="text"
                disabled
              ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="婚姻状况" label-width="80px">
              <el-col :span="20">
              <el-input
                v-model="marriage"
                type="text"
                disabled
              ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="星座" label-width="80px">
              <el-col :span="20">
              <el-input
                v-model="constellation"
                type="text"
                disabled
              ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="国籍" label-width="80px">
              <el-col :span="20">
              <el-input
                v-model="nation"
                type="text"
                disabled
              ></el-input>
              </el-col>
            </el-form-item> -->
          </el-form>
          </el-card>
        </el-aside>
        <el-container>
          <el-main>
            <el-card class="box-card2">
                <div slot="header" class="clearfix">
                  <span style="float: left"><b>个人说明</b></span>
                </div>
                <div>
                  <el-table :data="tableData" style="width: 100%" border>
                  <el-table-column prop="paramName" label="名称" width="280" align="center">
                  </el-table-column>
                  <el-table-column prop="paramValue" label="情况" align="center">
                  </el-table-column>
                </el-table>
                </div>
            </el-card>
            <el-card class="box-card2" shadow="always">
              <div slot="header" class="clearfix">
                <span style="float: left"><b>账号绑定</b></span>
              </div>
              <div class="text item">
                <el-table border :data="tableData2" style="width: 100%">
                  <el-table-column label="账号类别" width="280" prop="paramName" align="center"> 
                  </el-table-column>
                  <el-table-column label="账号名" align="center" prop="paramValue">
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
            
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  export default {
    name: 'PersonalCenter',
    data() {
      return {
        text: '',
        username:'',
        status:'',
        sex:'女',
        mail: '',
        age: '21',
        phonenumber: '',
        politics: '群众',
        occupation: '学生',
        marriage: '未婚',
        constellation: '天蝎座',
        nation: '中国',
        circleUrl:
          'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        sizeList: ['large'],
        tableData: [
          {
            paramName:"政治面貌",
            paramValue:'群众'
          },{
            paramName:"职业",
            paramValue:'学生'
          },{
            paramName:"婚姻情况",
            paramValue:'未婚'
          },{
            paramName:"星座",
            paramValue:'天蝎座'
          },{
            paramName:"国籍",
            paramValue:'中国大陆'
          },
        ],
        tableData2: [
          {
            paramName:"GitLab账号",
            paramValue:'691293498@qq.com'
          },{
            paramName:"Jira账号",
            paramValue:'691293498@qq.com'
          },{
            paramName:"wiki账号",
            paramValue:'691293498@qq.com'
          },
        ],
      }
    },
    created(){
      var temp=localStorage.getItem("status")
      if(temp=='0'){
        this.status='普通用户'
      }else if(temp=='1'){
        this.status='管理员'
      }else if(temp=='2'){
        this.status='超级管理员'
      }
      this.username=localStorage.getItem("username")
      this.mail=localStorage.getItem("mail")
      this.phonenumber=localStorage.getItem("phonenumber")

    },
    methods: {
      
    },
  }
</script>
<style scoped>
.el-header {
    line-height: 60px;
    text-align: center;
    background-color: #b3c0d1;
  }
  .el-aside {
    line-height: 44px;
    text-align: center;
    background-color: #d3dce6;
  }
  .el-main {
    text-align: center;
    background-color: #e9eef3;
  }

  .demo-basic--circle {
    margin-top: 30px;
  }
  .block {
    margin-left: 25px;
    font-weight: bold;
  }
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }

  .box-card1 {
    width: 300px;
    border-radius: 20px;
    text-align: center;
  }
  .box-card2 {
    width: 800px;
    border-radius: 20px;
    margin-left: 20px;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  
</style>
<style>
.el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>


